<!DOCTYPE html>
<html lang="en">
<style>
    html,body{
        background: #F6F6F6 !important;
        padding: 0;
        margin: 0;
    }
    p{
        margin-bottom: 0 !important;
    }
    .swiper{
        width: 100%;
        height: 400px;
    }

    .swiper img{
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    .formData{
        width: 1200px;
        margin: 12px auto;
    }
    .select{
        width: 1200px;
        height: 100px;
        background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .name{
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        position: relative;
    }
    .name span{
        color: #FF751A;
    }
    .name input{
        width: 372px;
        height: 48px;
        margin-left: 12px;
        border-radius: 4px;
        text-indent: 1em;
        border:1px solid #979595;
        outline: none;

    }
    .vido,.card{
        position: absolute;
        top: 40px;
        left: 50px;
        color: rgba(217, 0, 27, 1);
        display: none;
    }
    .card{
        left: 76px;
    }

    .changeButton{
        width: 140px;
        height: 48px;
        background: #0AD15D;
        border-radius: 4px;
        text-align: center;
        line-height: 48px;
        color: #fff;
        font-size: 16px;
        cursor:pointer
    }

    .success{
        margin-top: 24px;
        background: #fff;
        width: 1200px;
    }
    .content{
        width: 1200px;
        padding-top: 24px;
        box-sizing: border-box;
    }

    .content p{
        margin-bottom: 0;
    }

    .info{
        font-size: 28px;
        color: #0AD15D;
        text-align: center;
    }

    .cate{
        text-align: center;
        color: #ABB1BE;
        font-size: 14px;
    }

    .certInfo{
        width: 1200px;
    }

    .certificate{
        width: 500px;
        margin: 40px auto 0;
    }

    .certificate img{
        width: 100%;
    }

    .characters{
        text-align: center;
        font-size: 16px;
        color: #666;
        padding: 24px 0 40px;
        margin: 0;
        color: rgba(217, 0, 27, 1);
    }

    .userInfo{
        width: 1152px;
        margin: 24px auto 0;
        display: none;
    }

    .tables{
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        margin-bottom: 2px;
        display: flex;
    }

    .userName{
        line-height: 48px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-right: 2px;
    }
    .userName p{
        padding: 0;
        margin: 0;
    }

    .user{
        width: 240px;
        background: #F0F9FB;
        margin-right: 2px;
        text-align: center;
    }

    .monicker{
        width: 330px;
        background: #FFFAF6;
        text-indent: 2em;
    }

    .panel{
        background: transparent;
        border: 1px solid #F2F2F2;
        box-sizing: border-box;
    }

    .panelBox{
        background: transparent;
        width: 900px;
        border: 1px solid #F2F2F2;
        text-align: left;
        text-indent: 2em;
    }

    .book{
        margin-top: 24px;
        padding-bottom: 24px;
        width: 1152px;
    }

    .book img{
        width: 100%;
    }

    .resetTab{
        height: initial;
    }
    .resetPanel{
        line-height: 100px;
    }
</style>
<link rel="stylesheet" href="../../../css/swiper.css">
<!--<head th:include="certificateWeb/headFoot :: headerCss"></head>-->
<head>
    <title>证书查询</title>
</head>
<body>
<!--    <div th:include="certificateWeb/headFoot :: header"></div>-->

    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://jinzhiweiye.oss-cn-hangzhou.aliyuncs.com/2023/11/1129/zhengshuchaxun.jpg" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="formData">

        <div class="select">
            <div class="name">
                <span>*</span>姓名 <input type="text" placeholder="请输入您的姓名" id="name">
            </div>
            <div class="name">
                <span>*</span>身份证号 <input type="text" placeholder="请输入您的身份证号码" id="idNumber"  class="ti2 layui-input">
            </div>
            <div class="changeButton" onclick="queryClick()">查询</div>
        </div>

        <div class="success">

            <div class="content">
                <p class="info">证书信息</p>
                <p class="cate">Certificate information</p>
            </div>

            <div class="userInfo">
                
                <div class="tables">
                    <div class="userName">
                        <p class="user">姓名：</p>
                        <p class="monicker ninaname"></p>
                    </div>
                    <div class="userName">
                        <p class="user">证件类型：</p>
                        <p class="monicker cards"></p>
                    </div>
                </div>

                <div class="tables">
                    <div class="userName">
                        <p class="user panel">证件号码：</p>
                        <p class="monicker panel idNumber"></p>
                    </div>
                    <div class="userName">
                        <p class="user panel">职业名称：</p>
                        <p class="monicker panel type"></p>
                    </div>
                </div>

                <div class="tables">
                    <div class="userName">
                        <p class="user">证书编号：</p>
                        <p class="monicker numbers"></p>
                    </div>
                    <div class="userName">
                        <p class="user">发证日期：</p>
                        <p class="monicker getTime"></p>
                    </div>
                </div>

                <div class="tables resetTab">
                    <div class="userName">
                        <p class="user panel resetPanel">发证机构：</p>
                        <div>
                            <p class="monicker panelBox issuingUnit"></p>
                            <p class="monicker panelBox oneUnit"></p>
                        </div>
                    </div>
                </div>
                
                <div class="book">
                    <img src="/img/book.png" alt="">
                </div>

            </div>

            <div class="certInfo">
                <div class="certificate">
                    <img src="/img/info.png" alt="">
                    <p class="characters">暂无证书</p>
                </div>
            </div>

        </div>

    </div>

<!--    <div th:include="certificateWeb/headFoot :: footer"></div>-->
    <script src="/js/jquery.min.js?v=2.1.4"></script>

    <script>

        $("input").each(function (k,v){
            $(v).blur(function (){
                $(".characters").html('暂无证书')
            })
        })

        var swiper = new Swiper(".mySwiper", {
            loop: true,
            pagination: {
                el: ".swiper-pagination",
            },
        });


        function queryClick(){
            if( !$("#name").val() ) {
                alert('请输入您的姓名');
                return false;
            }
            if( !$("#idNumber").val() ) {
                alert('请输入您的身份证号码');
                return false;
            }
            var regId = /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/;
            if (!regId.test( $("#idNumber").val() )) {
                alert('请输入正确的身份证号');
                return false
            }
            $.ajax({
                url: "/jzweb/newTrainingCertificates/selNewTrainingCertificates",
                type: 'GET',
                data: {
                    name: $("#name").val(),
                    idNumber: $("#idNumber").val()
                },
                success: function (res) {
                    if (res.data) {
                        $(".userInfo").show()
                        $(".certificate").hide()
                        $(".ninaname").html(res.data.name)
                        $(".cards").html(res.data.idNumberType)
                        $(".idNumber").html(res.data.idNumber)
                        $(".type").html(res.data.type)
                        $(".numbers").html(res.data.numbers)
                        $(".getTime").html(res.data.getTime)
                        let issuingUnit = res.data.issuingUnit.split(',');
                        $(".issuingUnit").html(issuingUnit[0])
                        $(".oneUnit").html(issuingUnit[1])
                        $(".book").find('img').attr('src',res.data.imgUrl)
                    } else {
                        $(".userInfo").hide()
                        $(".certificate").show()
                        $(".characters").html('未查询到您的证书信息请确认输入了正确的姓名与身份证号！')
                    }
                }
            });
        }

    </script>
</body>
</html>